<template>
	<view class="apply-for-cat">
		<!-- 时间轴 -->
		<time-line :processIndex="1" />
		<!-- 信息填写 -->
		<view class="apply-for-cat-item">
			<text class="apply-for-cat-title">猫咪身份证</text>
			<input type="text" :value="params.cat_id" :disabled="true" />
		</view>
		<picker @change="bindPickerChange" :value="storeIndex" :range="storeList" range-key="store_name">
			<view class="apply-for-cat-item">
				<input type="text" placeholder="选择领取猫咪门店" :disabled="true" placeholder-class="placeholder-tt" v-model="store_name" />
				<icon class="icon-XXIA"></icon>
			</view>
		</picker>
		<view class="apply-for-cat-item"><input type="text" v-model="params.name" placeholder="你的名字" placeholder-class="placeholder-tt" /></view>
		<view class="apply-for-cat-item"><input type="number" maxlength="11" v-model="params.phone" placeholder="请输入你的手机号" placeholder-class="placeholder-tt" /></view>
		<view class="apply-for-cat-item"><input type="text" v-model="params.wx_id" placeholder="微信ID" placeholder-class="placeholder-tt" /></view>
		<view class="apply-for-cat-item" @click="openPicker">
			<input type="text" :value="`${params.province + params.city + params.district}`" placeholder="请选择您的所在地址" :disabled="true" placeholder-class="placeholder-tt" />
			<icon class="icon-XXIA"></icon>
		</view>
		<view class="textarea-box">
			<textarea v-model="params.detailed_address" placeholder-style="color:#999999" placeholder="请输入您的详细地址。NABERCAT将对您填写的信息保密，请放心填写" />
		</view>
		<!-- 协议 -->
		<view class="agreement-case">
			<icon @click="onAgree" :class="{ 'icon-argee': isAgree }"></icon>
			<view class="agreement-text">
				已阅读
				<text @click="lookDocx">《免责协议》</text>
				并同意该协议
			</view>
		</view>
		<button class="apply-for-cat-btn" :style="{ backgroundColor: !isAgree ? '#999999' : '' }" @click="submitApply">提交申请</button>
		<!-- 省市区选择 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="[0, 0, 0]" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
	</view>
</template>

<script>
const app = getApp();
import TimeLine from '../components/timeLine/timeLine.vue';
import simpleAddress from '@/components/simple-address/simple-address.vue';
import { getCatId, xStores, catBuyer } from '@/api/buyCat.js';
import { regularFun, regularPhone, regularWx } from './index.js';
export default {
	components: {
		TimeLine,
		simpleAddress
	},
	data() {
		return {
			goods_id: '', //商品id
			storeList: [], //门店列表
			storeIndex: 0, //选择门店索引
			store_name: '', //选中门店的名称
			params: {
				province: '', //省
				city: '', //市
				district: '', //区
				detailed_address: '', //详情地址
				name: '', //购买者姓名
				phone: '', //购买者电话
				wx_id: '', //购买者微信号
				cat_id: '', //猫咪身份证号
				store_id: '', //领取门店id
				openid: app.globalData.openid //填写者openid
			},
			isAgree: false //是否同意协议
		};
	},
	methods: {
		// 获取猫咪身份证
		async getCatId() {
			const res = await getCatId({
				goods_id: this.goods_id
			});
			this.params.cat_id = res.cat_id;
		},
		// 获取门店列表
		async xStores() {
			const res = await xStores();
			this.storeList = res;
		},
		// 门店选择
		bindPickerChange(event) {
			let msg = this.storeList[event.detail.value];
			this.store_name = msg.store_name;
			this.params.store_id = msg.id;
		},
		// 省市区选择
		openPicker() {
			this.$refs.simpleAddress.open();
		},
		onConfirm(e) {
			e.labelArr[1] = e.labelArr[1] == '市辖区' ? e.labelArr[0] : e.labelArr[1];
			this.params.province = e.labelArr[0];
			this.params.city = e.labelArr[1];
			this.params.district = e.labelArr[2];
		},
		// 查看协议
		lookDocx() {
			uni.downloadFile({
				url: 'https://www.nabercat.com/Public/免责声明.docx',
				success: function(res) {
					console.log(res);
					uni.openDocument({
						filePath: res.tempFilePath,
						success: function(res) {
							console.log('打开文档成功');
						}
					});
				}
			});
		},
		// 点击同意协议
		onAgree() {
			this.isAgree = !this.isAgree;
		},
		// 提交申请
		async submitApply() {
			if (!regularFun(this.params.store_id, '领养猫咪门店')) {
				return false;
			}
			if (!regularFun(this.params.name, '名字')) {
				return false;
			}
			if (!regularPhone(this.params.phone)) {
				return false;
			}
			if (!regularWx(this.params.wx_id)) {
				return false;
			}
			if (!regularFun(this.params.province, '省市区')) {
				return false;
			}
			if (!regularFun(this.params.detailed_address, '详细地址')) {
				return false;
			}
			if (!this.isAgree) {
				uni.showToast({
					title: '请查看并同意协议',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			const res = await catBuyer(this.params);
			uni.showToast({
				title: res == 1 ? '提交成功' : res == 3 ? '你已提交过记录' : '提交失败',
				duration: 2000,
				icon: res == 1 ? 'success' : res == 3 ? 'none' : 'error'
			});
			if (res == 1) {
				uni.navigateTo({
					url: `/pagesBuyCat/earnestPay/earnestPay?goods_id=${this.goods_id}`
				});
			}
		}
	},
	onLoad(options) {
		this.goods_id = options.goods_id;
		this.getCatId();
		this.xStores();
	}
};
</script>

<style scoped lang="scss">
.apply-for-cat {
	padding: 156rpx 32rpx 0;
	.apply-for-cat-item {
		height: 96rpx;
		border-bottom: 2rpx solid #d8d8d8;
		display: flex;
		align-items: center;
		width: 100%;
		padding-right: 32rpx;
		.apply-for-cat-title {
			font-size: 28rpx;
			color: #999999;
			line-height: 40rpx;
			margin-right: 40rpx;
		}
		& > input {
			flex: 1;
			height: 100%;
			font-size: 28rpx;
			color: #333333;
		}
		.icon-XXIA {
			width: 20rpx;
			height: 16rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-gaomaisqb-xia.png) no-repeat;
			background-size: cover;
		}
		/deep/.placeholder-tt {
			color: #999999;
		}
	}
	.textarea-box {
		width: 100%;
		height: 242rpx;
		padding: 24rpx;
		background: #f2f2f2;
		border-radius: 12rpx;
		box-sizing: border-box;
		margin: 24rpx 0;
		& > textarea {
			width: 100%;
			height: 100%;
			font-size: 28rpx;
			color: #999999;
			line-height: 40rpx;
			color: #333333;
		}
	}
	.agreement-case {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		& > icon {
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			box-sizing: border-box;
			border: 2rpx solid #999999;
		}
		.icon-argee {
			border: none;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-argee-tongyi.png) no-repeat;
			background-size: cover;
		}
		.agreement-text {
			font-size: 24rpx;
			color: #999999;
			line-height: 32rpx;
			margin-left: 10rpx;
			& > text {
				color: #fa8384;
			}
		}
	}
	.apply-for-cat-btn {
		width: 470rpx;
		height: 72rpx;
		background: #fa8384;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 600;
		color: #ffffff;
	}
}
</style>
